<template>
  <div class="toolRoleSet">
    <el-row :gutter="10" class="pd-5">
      <el-col :span="6" class="mgl-10"> 当前角色：{{ route.query.name }} </el-col>
      <el-col :span="1.5" :offset="14">
        <el-button @click="goback" size="small">
          <el-icon :size="18"><ArrowLeft /></el-icon>返回</el-button
        >
      </el-col>
      <el-col :span="1">
        <el-button @click="goRefresh" size="small">
          <el-icon :size="18"><Refresh /></el-icon>
          刷新</el-button
        >
      </el-col>
    </el-row>

    <el-row :gutter="10" v-for="(item, index) in state.list" :key="index">
      <el-col :span="6" :offset="1">
        <div>{{ item.title }}</div>
        <!-- <el-checkbox  :label="item.id" size="large" ></el-checkbox> -->
      </el-col>
      <el-col :offset="4" v-for="(val, i) in item.children" :key="i">
        <div class="flex">
          <el-checkbox-group v-model="menuLists" @change="handleCheckedMenuChange(val, item)">
            <el-checkbox :label="val.id">{{ val.title }}</el-checkbox>
          </el-checkbox-group>
          <el-checkbox-group v-model="btnLists" @change="handleCheckedCitiesChange" class="mgl-10">
            <el-checkbox v-for="(s, n) in val.permis" :key="n" :label="s.id">{{ s.permissionDesc }}</el-checkbox>
          </el-checkbox-group>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6" :offset="10">
        <el-checkbox v-model="checkAll" label="选择全部" size="large" :indeterminate="isIndeterminate" @change="handleCheckAllChange" />
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mb-4 pd-5">
      <el-col :span="6" :offset="10">
        <el-button type="primary" @click="addPermis">保存</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="User">
import { getToken } from "@/utils/auth";
import { setPermis, savePermis } from "@/api/role";
import $tab from "@/plugins/tab.js";
import { reactive } from "vue";
import { ElMessage } from "element-plus";

const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const menuLists = ref([]); //选中数据
const btnLists = ref([]);
const checked1 = ref();
const menucCheckedCount = ref();
const btnCheckedCount = ref();
const state = reactive({
  list: [],
  menuLists: [], //菜单权限
  btnLists: [], //按钮权限
  pidList: [], //左侧功能菜单权限
});

const checkAll = ref(false);
const isIndeterminate = ref(false);
const checkedCities = ref([]);
const cities = ref([]);

//全选
const handleCheckAllChange = (val) => {
  console.log(val, "vla");
  menuLists.value = val ? [...state.menuLists, ...state.pidList] : [];
  btnLists.value = val ? [...state.btnLists] : [];
  isIndeterminate.value = false;
};
const handleCheckedCitiesChange = (value) => {
  cities.value = [...state.btnLists];
  btnCheckedCount.value = value.length;
  // checkAll.value = btnCheckedCount.value === cities.value.length;
  isIndeterminate.value = btnCheckedCount.value > 0 && btnCheckedCount.value < cities.value.length;
};

//选中事件
function handleCheckedMenuChange(value, item) {
  console.log(item.id, "77777");
  let idList = [];
  if (item.hasOwnProperty("children")) {
    item.children.forEach((res) => {
      idList.push(res.id);
    });
  }
  if (menuLists.value.includes(value.id)) {
    console.log(1);
    if (!menuLists.value.includes(item.id)) {
      menuLists.value.push(item.id);
    }
    console.log(menuLists.value, "确认");
  } else {
    console.log(6666, item.id, menuLists.value.indexOf(item.id));
    const result = idList.filter((i) => {
      if (menuLists.value.includes(i)) {
        return i;
      }
    });
    if (result.length <= 0) {
      menuLists.value.splice(menuLists.value.indexOf(item.id), 1);
    }
    console.log(menuLists.value, "取消");
  }
  cities.value = [...state.menuLists];
  menucCheckedCount.value = value.length;
  isIndeterminate.value = menucCheckedCount.value > 0 && menucCheckedCount.value < cities.value.length;
}

//返回
function goback() {
  const obj = { path: "/tool/role", name: "Role" };
  $tab.closePage(obj);
  router.go(-1);
}

//权限设置
function setRolePermis() {
  console.log(route.query, "setRolePermis");
  setPermis(route.query.id).then((res) => {
    console.log(res, "quanxian");
    state.list = res;
    state.list.forEach((item) => {
      state.pidList.push(item.id);
      if (item.hasOwnProperty("children")) {
        item.children.forEach((val) => {
          if (val.select) {
            if (!menuLists.value.includes(item.id)) {
              menuLists.value.push(item.id);
            }
            menuLists.value.push(val.id);
          }
          state.menuLists.push(val.id);
          if (val.hasOwnProperty("permis")) {
            val.permis.forEach((i) => {
              if (i.select) {
                btnLists.value.push(i.id);
              }
              state.btnLists.push(i.id);
            });
          }
        });
      }
    });
    console.log(state.pidList, "state.pidListstate.pidList");
  });
}

setRolePermis();

//权限保存
function addPermis() {
  if (menuLists.value.length <= 0) {
    ElMessage({
      message: "请选择权限",
      type: "warning",
    });
    return;
  }
  if (btnLists.value.length <= 0) {
    ElMessage({
      message: "请选择权限",
      type: "warning",
    });
    return;
  }
  const data = {
    roleId: route.query.id,
    resourceIds: menuLists.value,
    permissionIds: btnLists.value,
  };
  console.log(menuLists.value, "baocun");
  savePermis(data).then((res) => {
    if (res.code == 200) {
      ElMessage({
        message: res.msg,
        type: "success",
      });
    }
    setTimeout(() => {
      setRolePermis();
    });
  }, 1000);
}

function goRefresh() {
  setRolePermis();
}
</script>
<style lang="scss" scoped>
.toolRoleSet :deep(.el-row) {
  border-bottom: 1px solid #ccc;
  .top-right-btn .el-row {
    border: none;
    margin-right: 20px;
  }
}
.pd-5 {
  padding: 10px 0;
}
.flex {
  display: flex;
}
.mgl-10 {
  margin-left: 20px;
}
</style>
